  <template>
  <div class="tg">
    <!-- 跳转上一个页面 -->
    <router-link to="/guidebook">
      <div>
        <img
          src="https://image.hongbeibang.com/FoTuxKG5pqYKuAsT8BjrflkAxEpj?48X48&imageView2/1/w/48/h/48"
          alt=""
        />
        <p>步骤详情</p>
      </div>
    </router-link>
    <!-- 内容开始 -->
    <div class="detail">
      <video controls="controls" :src="data.trySeeUrl"></video>
      <div class="content">
        <h2>试看步骤:{{ data.trySeeTitle }}</h2>
        <div class="human">
          <img
            src="https://image.hongbeibang.com/FgRQxfAWq4kOdLc5xd_GxWm03Vs_?54X54&imageView2/1/w/54/h/54"
            alt=""
          />
          <div>1000+</div>
          <p>人在学</p>
        </div>
        <!-- 你将学会 -->
        <div v-if="data.introduces">
          <h3>{{ data.introduces[0].title }}</h3>
          <div v-html="data.introduces[0].introduce"></div>
        </div>
        <!-- 如何学习 -->
        <div v-if="data.introduces">
          <h3>{{ data.introduces[1].title }}</h3>
          <p v-html="data.introduces[1].introduce"></p>
        </div>
        <!-- 老师介绍 -->
        <div class="notes">
          <img :src="data.teacherImage" alt="" />
          <span>{{ data.teacherName }}</span>
          <div>
            <p v-html="data.teacherIntroduce"></p>
          </div>
        </div>
        <!-- 最底部 -->
        <div class="text-three">
          <img
            src="https://image.hongbeibang.com/FgyNuZ8yE795vzF-O4lGF3G5Caxr?551X245&imageView2/1/w/551/h/242"
            alt=""
          />
          <p>
            烘焙帮学堂，是由烘焙帮推出的课程品牌，通过官方自制的教学视频，用科学的烘焙配方、细致的步骤讲解、贴心的答疑服务，让烘焙更简单！
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {},
    };
  },
  mounted() {
    this.getData();
    this.too();
  },
  methods: {
    too() {
      this.$route.query.id;
    },
    getData() {
      this.axios
        .get(
          `/education/getCourse?_t=1666058093724&educationCourseId=${this.$route.query.id}&timestamp=1666058093724`
        )
        .then((res) => {
          this.data = res.data.data;
        });
    },
  },
};
</script>

<style scoped>
.tg > a > div:first-child > img {
  width: 8vw;
  margin: 2vh 3vw;
}
.tg > a > div:first-child {
  display: flex;
}
.tg > a > div:first-child > p {
  margin-top: 3vh;
  margin-left: 27vw;
  color: black;
  font-size: 5vw;
}
.detail {
  width: 100vw;
}
.detail > video {
  width: 100%;
  margin-bottom: 2vh;
}
.content {
  width: 90vw;
  margin: 0 auto;
}
.human {
  display: flex;
}
.human > img {
  margin-top: 1vh;
  width: 8vw;
}
.human > div {
  color: red;
  margin-top: 2vh;
  padding-right: 1vw;
}
.human > p {
  margin-top: 2vh;
}
.content > div:nth-child(2) {
  margin: 2vh 0;
}
.content > div {
  margin-bottom: 4vh;
  border-bottom: 2px solid black;
  padding-bottom: 2vh;
}
.content > .notes > img {
  width: 30vw;
  height: 17vh;
}
.content > .notes > span {
  font-weight: bold;
  font-size: 20px;
  vertical-align: AbsMiddle;
}
/* 最底部 */
.text-three > img {
  margin-top: 4vh;
  width: 40%;
}
</style>
